import React, { useState } from 'react'
import { NavBar, SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { DeleteOutline } from 'antd-mobile-icons'

const hotList = [
  '鸡蛋', '牛奶', '抽纸', '血橙', '青椒',
  '油麦菜', '荷兰豆', '西红柿'
]

export default function Shou() {
    const navigate = useNavigate()
    const [history, setHistory] = useState<string[]>(['鸡蛋', '海苔', '可乐'])
    const [value, setValue] = useState('')

    // 搜索行为：按钮或回车
    const onSearch = (val?: string) => {
        const keyword = typeof val === 'string' ? val : value
        if (!keyword.trim()) return
        setHistory(prev => {
            const newArr = [keyword, ...prev.filter(item => item !== keyword)]
            return newArr.slice(0, 10)
        })
        setValue('')
        navigate(`/app/searchResult?keyword=${encodeURIComponent(keyword)}`)
    }

    // 清空历史
    const clearHistory = () => setHistory([])

    const back = () => {
        navigate('/app/home')
    }

    return (
        <div style={{ padding: 12 }}>
            <NavBar onBack={back}>搜索</NavBar>
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'center' }}>
                <SearchBar
                    value={value}
                    onChange={setValue}
                    placeholder="请输入内容"
                    style={{ flex: 1, borderRadius: 20 }}
                    onSearch={onSearch}
                />
                <button
                    style={{ border: 0, backgroundColor: '#FFF', color: 'red', fontSize: 18, marginLeft: 8, cursor: 'pointer' }}
                    onClick={() => onSearch()}
                >
                    搜索
                </button>
            </div>
            <div style={{ marginTop: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontWeight: 'bold', fontSize: 18, margin: '16px 0 8px 0' }}>
                    <span>历史搜索</span>
                    <DeleteOutline onClick={clearHistory} style={{ fontSize: 22, cursor: 'pointer' }} />
                </div>
                <div>
                    {history.slice(0, 5).map((item, idx) => (
                        <span
                            key={idx}
                            onClick={() => setValue(item)}
                            style={{
                                display: 'inline-block',
                                background: '#f5f5f5',
                                borderRadius: 16,
                                padding: '4px 16px',
                                marginRight: 8,
                                marginBottom: 8,
                                fontSize: 16,
                                cursor: 'pointer'
                            }}
                        >
                            {item}
                        </span>
                    ))}
                </div>
            </div>
            <div style={{ marginTop: 24 }}>
                <div style={{ fontWeight: 'bold', fontSize: 18, margin: '16px 0 8px 0' }}>热门搜索</div>
                <div>
                    {hotList.map((item, idx) => (
                        <span
                            key={idx}
                            onClick={() => setValue(item)}
                            style={{
                                display: 'inline-block',
                                background: '#f5f5f5',
                                borderRadius: 16,
                                padding: '4px 16px',
                                marginRight: 8,
                                marginBottom: 8,
                                fontSize: 16,
                                cursor: 'pointer'
                            }}
                        >
                            {item}
                        </span>
                    ))}
                </div>
            </div>
        </div>
    )
}


